<template>
  <div v-if="showCamera">
    <div ref="boxContent" class="boxContent">
        <video ref="videoPlayer" class="video-js player"></video>
      </div>
  </div>
</template>
    
  
<script lang="ts">

import {
  defineComponent,
  ref,
  computed,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import videojs from "video.js"
import "video.js/dist/video-js.css"
import { useStore } from "vuex";

// 声明类型
const PropsType = {
  data: {
    type: Object,
    require: true,
  },
}

export default defineComponent({
  props: PropsType,
  components: {
    
  },
  setup(props) {
    const datavColors = computed(() => useStore().state.datavColors);
    const showCamera = ref(false);
    const boxContent = ref(null);
    const videoPlayer = ref(null)
    const myPlayer = ref(null)
    

    const playm3u8 = (url) => {
      showCamera.value = true
      setTimeout(() => {
        myPlayer.value = videojs(videoPlayer.value, {
          controls: true,
          language: 'zh-CN',
          sources: [
            {
              src: url,
              // type: 'video/flv',
              type: 'application/x-mpegURL',
            }
          ],
          autoplay:true,
          controlBar: {
            remainingTimeDisplay: {
              displayNegative: false
            }
          },
          playbackRates: [0.5, 1, 1.5, 2]
        }, () => {
          // myPlayer.value.play()
          
        })
      }, 100);
    }

    // 监听
    watch(
      () => props.data,
      (val) => {
        console.log(val);
      }
    );

    onMounted(() => {
      //
      
    });

    onUnmounted(() => {
      closeWindow()
    });
    //methods

    const closeWindow = () => {
      //
      if (myPlayer.value) {
        myPlayer.value.dispose()
        myPlayer.value = null
      }
      showCamera.value = false
    }

    return {
      datavColors,
      showCamera,
      boxContent,
      videoPlayer,
      closeWindow,
      playm3u8
    };
  },
});
</script>
    
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$px: 20px;

.boxContent {
    width: 600px;
    height: 400px;
    .player{
      width: 100%;
      height: 100%;
    }
  }
</style>
    